Date.prototype.allDays = function () { //当前月有多少天
    let tempDate = new Date("2000-01-01");
    tempDate.setFullYear(this.getFullYear());//2021-01-01
    tempDate.setMonth(this.getMonth() + 1);//2021-11-01
    tempDate.setDate(0);//当前月的最后一天
    return tempDate.getDate();
}

Date.prototype.prevDays = function () { //上个月有多少天
    let tempDate = new Date("2000-01-01");
    tempDate.setFullYear(this.getFullYear());//2021-01-01
    tempDate.setMonth(this.getMonth());//2021-10-01
    tempDate.setDate(0);//当前月的最后一天
    return tempDate.getDate();
}

Date.prototype.firstDayWeek = function () { //当前月的第一天是星期几
    let tempDate = new Date("2000-01-01");
    tempDate.setFullYear(this.getFullYear());//2021-01-01
    tempDate.setMonth(this.getMonth());//2021-10-01
    return tempDate.getDay();
}

Date.prototype.dateFormat = function (str) { //日期格式刷
    let year = this.getFullYear();
    let month = this.getMonth() + 1;
    let date = this.getDate();
    return str.replace("yyyy", year).replace("mm", month).replace("dd", date);
}

$.fn.extend({
    dataPicker: function (option) {
        let that = this;

        this.parent = $("<div class='datepicker'>");
        $(this).wrap(this.parent);
        this.datePickerBox = $(`<div class="datepicker-box">`);
        $(this).parent().append(this.datePickerBox);
        this.datePickerBox.hide();

        this.datePickerBoxHeader = $(`<div class="datepicker-header">`);
        this.datePickerBox.append(this.datePickerBoxHeader);

        this.datePickerBoxHeaderPrevBtn = $(` <div class="header-prev">上</div>`);
        this.datePickerBoxHeader.append(this.datePickerBoxHeaderPrevBtn);

        this.datePickerBoxHeaderContext = $(`<div class="header-content">2021-10-11</div>`);
        this.datePickerBoxHeader.append(this.datePickerBoxHeaderContext);

        this.datePickerBoxHeaderNextBtn = $(`<div class="header-next">下</div>`);
        this.datePickerBoxHeader.append(this.datePickerBoxHeaderNextBtn);

        this.datePickerBox.append(` <div class="datepicker-title">
            <div class="item">一</div>
            <div class="item">二</div>
            <div class="item">三</div>
            <div class="item">四</div>
            <div class="item">五</div>
            <div class="item">六</div>
            <div class="item">日</div>
        </div>`);
        this.datePickerBoxContent = $(`<div class="datepicke-content">`);
        this.datePickerBox.append(this.datePickerBoxContent);

        if (option.date) {
            this.date = new Date(option.date);
            this.val(this.date.dateFormat("yyyy-mm-dd"));
        } else {
            this.date = new Date();
        }

        that.datePickerBoxHeaderContext.html(that.date.dateFormat("yyyy年mm月"))
        this.creat = () => {

            var prevDays = this.date.prevDays();//上个月有多少天
            var curentDays = this.date.allDays();//本月有多少天
            var weekDays = this.date.firstDayWeek();//本月第一天是星期几
            weekDays = weekDays = 0 ? 7 : weekDays;
            var nextDays = 42 - curentDays - weekDays + 1;

            //循环生成结构 分为三次 分别上 当 下
            this.datePickerBoxContent.html("");//清空
            for (let i = prevDays - weekDays + 2; i <= prevDays; i++) {
                let item = $(`<div class="item"></div>`);
                item.html(i);
                this.datePickerBoxContent.append(item);

                //生成的上一个月的时间
                let tempDate = new Date("2000-01-01");
                tempDate.setFullYear(this.date.getFullYear());
                tempDate.setMonth(this.date.getMonth() - 1);
                tempDate.setDate(i);//

                item.data("date", tempDate.dateFormat("yyyy-mm-dd"));
            }
            for (let i = 1; i <= curentDays; i++) {
                let item = $(`<div class="item"></div>`);
                item.html(i);
                this.datePickerBoxContent.append(item);

                //生成的当月的时间
                let tempDate = new Date("2000-01-01");
                tempDate.setFullYear(this.date.getFullYear());
                tempDate.setMonth(this.date.getMonth());
                tempDate.setDate(i);//

                item.data("date", tempDate.dateFormat("yyyy-mm-dd"));
            }
            for (let i = 1; i <= nextDays; i++) {
                let item = $(`<div class="item"></div>`);
                item.html(i);
                this.datePickerBoxContent.append(item);

                //生成的下月的时间
                let tempDate = new Date("2000-01-01");
                tempDate.setFullYear(this.date.getFullYear());
                tempDate.setMonth(this.date.getMonth() + 1);
                tempDate.setDate(i);//

                item.data("date", tempDate.dateFormat("yyyy-mm-dd"));
            }

            $(this).click((e) => { //输入框点击
                e.stopPropagation();
                this.datePickerBox.show();
            });
            $(document).click(() => { //其他地方点击
                this.datePickerBox.hide();
            });


            $(document).on("click", ".item", function () { //点击赋值给输入框
                $(that).val($(this).data("date"));
            });
        }
        this.creat();

        // 绑定月份切换点击事件
        this.datePickerBoxHeaderNextBtn.click((e) => {//下一页的时间
            e.stopPropagation();
            that.date.setMonth(that.date.getMonth() + 1);
            that.creat();
            that.datePickerBoxHeaderContext.html(that.date.dateFormat("yyyy年mm月"));
        });
        this.datePickerBoxHeaderPrevBtn.click((e) => {//上一页的时间
            e.stopPropagation();
            that.date.setMonth(that.date.getMonth() - 1);
            that.creat();
            that.datePickerBoxHeaderContext.html(that.date.dateFormat("yyyy年mm月"));
        });
    }
})